<template>

  <el-button type="success" @click="dialogTableVisible = true">
    新增菜单
  </el-button>

  <el-table :data="tableData" border style="width: 100%">
    <el-table-column fixed type="index" label="编号"  />
    <el-table-column prop="menuName" label="菜单名称"/>
    <el-table-column prop="url" label="菜单Url"/>
    <el-table-column prop="pName" label="父级菜单名称"/>
    <el-table-column prop="createName" label="创建人"/>
    <el-table-column prop="createDate" label="创建日期" width="180px">
        <template v-slot="a">
            <span>{{ a.row.createDate==null?"":moment(a.row.createDate).format("YYYY-MM-DD  HH:mm:ss") }}</span>
        </template>
    </el-table-column>
    <el-table-column prop="updateName" label="修改人"/>
    <el-table-column prop="updateDate" label="修改日期" width="180px">
        <template v-slot="a">
            <span>{{ a.row.updateDate==null?"": moment(a.row.updateDate).format("YYYY-MM-DD  HH:mm:ss") }}</span>
        </template>
    </el-table-column>
    <el-table-column prop=" " label="操作" width="160px">
        <template v-slot="a">
            <el-button type="primary" @click="edit(a.row)">修改</el-button>
            <el-button type="danger" @click="del(a.row.id,a.row.menuName)">删除</el-button>
        </template>
    </el-table-column>
  </el-table>

  <!-- 新增菜单 -->
   <el-dialog v-model="dialogTableVisible" title="新增菜单" width="800">
      
          <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
        >

           <el-form-item label="父级菜单" >
              <el-cascader v-model="ruleForm.p_ID" :options="selectmenu" :props="props1" clearable />
            </el-form-item>

            <el-form-item label="菜单名称:" prop="menuName">
              <el-input v-model="ruleForm.menuName" />
            </el-form-item>

            <el-form-item label="跳转的Url地址:" prop="url">
              <el-input v-model="ruleForm.url" />
            </el-form-item>
            
            
            <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
   </el-dialog>


   <!-- 修改菜单 -->
   <el-dialog v-model="dialogTableVisibleUpdate" title="编辑菜单" width="800">
      
          <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
        >
  
           <el-form-item label="父级菜单" >
              <el-cascader v-model="ruleForm.p_ID" :options="selectmenu" :props="props1" clearable />
            </el-form-item>

            <el-form-item label="菜单名称:" prop="menuName">
              <el-input v-model="ruleForm.menuName" />
            </el-form-item>

            <el-form-item label="跳转的Url地址:" prop="url">
              <el-input v-model="ruleForm.url" />
            </el-form-item>
            
            <el-form-item>
            <el-button type="primary" @click="submitFormUpdate(ruleFormRef)">
                修改
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
   </el-dialog>


</template>

<script lang="ts" setup>
import { ref,reactive,onMounted, watch } from 'vue';
import axios from 'axios';
import moment from 'moment';
import httpr from '@/axioslan/axioshttp'
import httpw from '@/axioslan/axioshttps'
onMounted(()=>
{
    search();
    getselectmenu();
})

const tableData:any =ref(
)
const search=()=>
{
    httpr
    ({
        url:'/api/Menu/GetMenu',
        method:'get'
    })
    .then(res=>{
        tableData.value=res.data.data;
    })
}


//级联菜单
const props1 = {
  checkStrictly: true,
  value: 'id',
  label: 'menuName'
}


const selectmenu =ref([])
const getselectmenu=()=>
{
    httpr
    ({
        url:'/api/Menu/GetMenuSelect',
        method:'get'
    })
    .then(res=>{
        selectmenu.value=res.data.data;
    })
}

//新增菜单
const dialogTableVisible = ref(false)
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
const router=useRouter();

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    id:'',
  menuName: '',
  url: "",
  p_ID: ''
})


const rules = reactive<FormRules>({
  menuName: [
    { required: true, message: '菜单名称不能为空', trigger: 'blur' },
  ],
  url: [
    {
      required: true,
      message: '跳转的Url地址不能为空',
      trigger: 'change',
    },
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.p_ID=ruleForm.p_ID[ruleForm.p_ID.length-1]
      httpw
      ({
        url:'/api/Menu/CreateMenu',
        method:'post',
        data:ruleForm
      })
      .then(res=>{
        if(res.data.code==200)
        {
            ElMessage.success(res.data.msg);
            search();
            dialogTableVisible.value=false;
            ruleForm.menuName='',
            ruleForm.url='',
            ruleForm.p_ID=''
            return;
        }
        else
        {
            ElMessage.error(res.data.msg);
            search();
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//编辑菜单
const dialogTableVisibleUpdate = ref(false)
const edit=async (row:any)=>
{
    console.log(row);
    Object.assign(ruleForm,row);

   dialogTableVisibleUpdate.value=true;
}

const submitFormUpdate = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.p_ID=ruleForm.p_ID[ruleForm.p_ID.length-1]
      httpw
      ({
        url:'/api/Menu/UpdateMenu',
        method:'put',
        data:ruleForm
      })
      .then(res=>{
        if(res.data.code==200)
        {
            ElMessage.success(res.data.msg);
            search();
            dialogTableVisibleUpdate.value=false;
            ruleForm.menuName='',
            ruleForm.url='',
            ruleForm.p_ID=''
            return;
        }
        else
        {
            ElMessage.error(res.data.msg);
            search();
        }
      })
    } else {
      console.log('error submit!', fields)
      router.push('/');
    }
  })
}



//删除菜单
const hasChildren = (menuId: any) => {
  // 遍历 tableData 检查是否存在 p_ID (即 PID) 等于当前 menuId 的菜单
  return tableData.value.some((menu:any) => menu.p_ID === menuId);
};
 

const del=(id:any,name:any)=>
{
  ElMessageBox.confirm(
    '您确认要删除菜单['+name+']的信息吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => 
    {
      if(hasChildren(id))
      {
         ElMessageBox.confirm(
        '您确认要删除菜单['+name+']及以下全部的菜单信息吗?',
        '警告',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
           httpw
          ({
            url:'/api/Menu/DelMenu',
            method:'delete',
            params:
            {
              id:id
            }
          })
          .then(res=>{
            if(res.data.code==200)
            {
                ElMessage.success(res.data.msg);
                search();
                return;
            }
            else
            {
                ElMessage.error(res.data.msg);
                search();
                return;
            }
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消',
          })
        })
      }

      else
      {
        httpw
          ({
            url:'/api/Menu/DelMenu',
            method:'delete',
            params:
            {
              id:id
            }
          })
          .then(res=>{
            if(res.data.code==200)
            {
                ElMessage.success(res.data.msg);
                search();
                return;
            }
            else
            {
                ElMessage.error(res.data.msg);
                search();
                return;
            }
          })
      }

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}



</script>

<style>
.tooltip-base-box {
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}
</style>
